<template>
    <div class="tab-bar" >
        <div class="box" v-for="tab in tabs" :key="tab.pagePath" @click="toPath(tab.pagePath)" :class="tab.pagePath==router.currentRoute.value.path? 'color':''" >
            <van-icon :name='tab.icon' ></van-icon>
            <span>{{tab.text}}</span>
        </div>
    </div>
</template>

<script setup>
    import { onMounted } from '@vue/runtime-core'
    import { useRouter } from 'vue-router'
    import routes from '../../../router/routes'
    const router =  useRouter()
    const tabs =routes.filter(route => route.meta?.inTabbar).map(route => ({
        icon: route.meta.icon,
        text: route.meta.title,
        pagePath: route.path,
      }))
    // onMounted(function(){
        
    //     console.log(router.currentRoute.value.path)
    //   })
    function toPath(path){
        router.push(path)
      }
</script>
<style lang="less" scoped>
    .tab-bar{
        width: 100%;
        height: 50px;
        background: rgb(253, 250, 250);
        display: flex;
        justify-content: space-around;
        align-content: center;
        position: fixed;
        left: 0;
        bottom: 0;
        .box{ 
            flex: 1;
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;    
            color: #ccc;                 
            .van-icon{
                font-size: 24px;
            }
            span{
                display: inline-block;
                height: 18px;
                font-size:14px;
            }                 
        }
    }
    .color{
        color: #d81e06 !important;
    }
</style>>